<template>
	<view class="">
		<view class="title">单框 Boolean</view>
		<view class="list">
			<componentCheckBox v-model="singleValue"/>
		</view>
		<view class="title">单选框组 single</view>
		<view class="list">
			<componentCheckBox :options="options1" v-model="value0" single/>
		</view>
		<view class="title">字符串选项组</view>
		<view class="list">
			<componentCheckBox :options="options" v-model="value"/>
		</view>
		<view class="title">键值对选项组</view>
		<view class="list">
			<componentCheckBox :options="options1" v-model="value1"/>
		</view>
		<view class="title">全部禁用 disabled</view>
		<view class="list">
			<componentCheckBox :options="options1" v-model="value1" disabled/>
		</view>
		<view class="title">选项禁用 键值对选项生效</view>
		<view class="list">
			<componentCheckBox :options="options2" v-model="value1"/>
		</view>
		<view class="title">大小 size=70rpx</view>
		<view class="list">
			<componentCheckBox :options="options1" v-model="value1" size="70rpx"/>
		</view>
		<view class="title">倒角 radius=20rpx</view>
		<view class="list">
			<componentCheckBox :options="options1" v-model="value1" radius="20rpx"/>
		</view>
	</view>
</template>

<script>
	import componentCheckBox from './componentCheckBox.vue'
	export default {
		components: {
			componentCheckBox
		},
		data(){
			return {
				singleValue: true,
				value: ['选项一'],
				value0:1,
				value1: [1],
				
				options:['选项一', '选项二', '选项三'],
				options1:[
					{ label: '选项一', value: 1 },
					{ label: '选项二', value: 2 },
					{ label: '选项三', value: 3 },
				],
				options2:[
					{ label: '选项一', value: 1 },
					{ label: '选项二', value: 2, disabled:true },
					{ label: '选项三', value: 3 },
				]
			}
		},
		methods:{
			handleSelected(){
				this.value = ['b']
			}
		}
	}
</script>
<style lang="scss" scoped>
	
</style>